<template>
  <div id="app">
    <!-- 侧边栏 -->
    <aside class="sidebar" :class="{ 
      'collapsed': sidebarCollapsed, 
      'hidden': sidebarHidden,
      'active': mobileSidebarActive 
    }">
      <div class="sidebar-header">
        <div class="logo">
          <i class="fas fa-chart-line logo-icon"></i>
          <span class="logo-text">数据看板</span>
        </div>
        <div class="sidebar-controls">
          <button class="toggle-btn" @click="toggleSidebar" title="折叠/展开侧边栏">
            <i class="fas" :class="sidebarCollapsed ? 'fa-indent' : 'fa-outdent'"></i>
          </button>
          <button class="hide-btn" @click="toggleSidebarHidden" title="隐藏侧边栏">
            <i class="fas fa-times"></i>
          </button>
        </div>
      </div>
      
      <div class="sidebar-menu">
        <!-- 主菜单折叠区域 -->
        <div class="menu-section">
          <div class="menu-title" @click="toggleMenuSection('main')">
            <span>主菜单</span>
            <i class="fas" :class="menuSections.main ? 'fa-chevron-down' : 'fa-chevron-right'"></i>
          </div>
          <div class="menu-items" v-show="menuSections.main">
            <router-link to="/" class="menu-item" exact-active-class="active">
              <i class="fas fa-home"></i>
              <span>控制台</span>
            </router-link>
            <router-link to="/analysis" class="menu-item" active-class="active">
              <i class="fas fa-chart-pie"></i>
              <span>数据分析</span>
            </router-link>
            <router-link to="/data" class="menu-item" active-class="active">
              <i class="fas fa-database"></i>
              <span>数据管理</span>
            </router-link>
            <router-link to="/users" class="menu-item" active-class="active">
              <i class="fas fa-users"></i>
              <span>用户管理</span>
            </router-link>
          </div>
        </div>
        
        <!-- 系统设置折叠区域 -->
        <div class="menu-section">
          <div class="menu-title" @click="toggleMenuSection('system')">
            <span>系统设置</span>
            <i class="fas" :class="menuSections.system ? 'fa-chevron-down' : 'fa-chevron-right'"></i>
          </div>
          <div class="menu-items" v-show="menuSections.system">
            <router-link to="/settings" class="menu-item" active-class="active">
              <i class="fas fa-cog"></i>
              <span>系统设置</span>
            </router-link>
            <router-link to="/permissions" class="menu-item" active-class="active">
              <i class="fas fa-shield-alt"></i>
              <span>权限管理</span>
            </router-link>
            <router-link to="/logs" class="menu-item" active-class="active">
              <i class="fas fa-history"></i>
              <span>操作日志</span>
            </router-link>
          </div>
        </div>
      </div>
    </aside>
    
    <!-- 主内容区域 -->
    <div class="main-content">
      <!-- 顶部导航 -->
      <header class="topbar">
        <div class="topbar-container">
          <!-- 左侧区域 - 布满整个宽度 -->
          <div class="full-width-section">
            <button class="sidebar-toggle" @click="toggleMobileSidebar">
              <i class="fas fa-bars"></i>
            </button>
            <button v-if="sidebarHidden" class="show-sidebar-btn" @click="showSidebar">
              <i class="fas fa-angle-double-right"></i>
              <span>显示侧边栏</span>
            </button>
            <div class="breadcrumb">
              <router-link to="/">首页</router-link>
              <i class="fas fa-chevron-right"></i>
              <span>{{ currentRouteName }}</span>
            </div>
            
            <!-- 右侧功能按钮 - 放在左侧区域内部 -->
            <div class="topbar-right">
              <button class="theme-toggle" @click="toggleTheme">
                <i class="fas" :class="darkMode ? 'fa-sun' : 'fa-moon'"></i>
              </button>
              
              <div class="notifications">
                <button class="notification-btn">
                  <i class="fas fa-bell"></i>
                  <span class="notification-badge">3</span>
                </button>
              </div>
              
              <div class="user-menu">
                <div class="user-avatar">A</div>
                <div class="user-info">
                  <div class="user-name">管理员</div>
                  <div class="user-role">超级管理员</div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </header>
      
      <!-- 内容区域 -->
      <div class="content">
        <router-view></router-view>
      </div>
    </div>
  </div>
</template>

<script>
import { ref, computed, onMounted } from 'vue';
import { useRoute } from 'vue-router';

export default {
  setup() {
    const route = useRoute();
    const sidebarCollapsed = ref(false);
    const sidebarHidden = ref(false);
    const darkMode = ref(false);
    const mobileSidebarActive = ref(false);
    
    // 菜单折叠状态
    const menuSections = ref({
      main: true,
      system: true
    });
    
    // 获取当前路由名称
    const currentRouteName = computed(() => {
      return route.meta.title || route.name || '当前页面';
    });
    
    // 切换菜单区域折叠状态
    const toggleMenuSection = (section) => {
      menuSections.value[section] = !menuSections.value[section];
    };
    
    // 切换侧边栏折叠状态
    const toggleSidebar = () => {
      sidebarCollapsed.value = !sidebarCollapsed.value;
    };
    
    // 切换侧边栏隐藏状态
    const toggleSidebarHidden = () => {
      sidebarHidden.value = !sidebarHidden.value;
    };
    
    // 显示侧边栏
    const showSidebar = () => {
      sidebarHidden.value = false;
    };
    
    // 切换移动端侧边栏
    const toggleMobileSidebar = () => {
      mobileSidebarActive.value = !mobileSidebarActive.value;
    };
    
    // 切换主题模式
    const toggleTheme = () => {
      darkMode.value = !darkMode.value;
      document.body.classList.toggle('dark-mode', darkMode.value);
      
      // 保存主题偏好到localStorage
      localStorage.setItem('darkMode', darkMode.value);
    };
    
    // 初始化主题
    onMounted(() => {
      const savedDarkMode = localStorage.getItem('darkMode') === 'true';
      if (savedDarkMode) {
        darkMode.value = true;
        document.body.classList.add('dark-mode');
      }
    });
    
    return {
      sidebarCollapsed,
      sidebarHidden,
      darkMode,
      mobileSidebarActive,
      menuSections,
      currentRouteName,
      toggleMenuSection,
      toggleSidebar,
      toggleSidebarHidden,
      showSidebar,
      toggleMobileSidebar,
      toggleTheme
    };
  }
}
</script>

<style>
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

:root {
  --primary: #4361ee;
  --secondary: #3f37c9;
  --success: #4cc9f0;
  --danger: #f72585;
  --warning: #f8961e;
  --info: #4895ef;
  --light: #f8f9fa;
  --dark: #212529;
  --text: #333;
  --text-light: #6c757d;
  --border: #dee2e6;
  --shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
  --sidebar-width: 260px;
  --sidebar-collapsed-width: 70px;
  --header-height: 60px;
  --transition: all 0.3s ease;
}

.dark-mode {
  --primary: #4895ef;
  --secondary: #4361ee;
  --light: #121212;
  --dark: #f8f9fa;
  --text: #e0e0e0;
  --text-light: #a0a0a0;
  --border: #2d2d2d;
  --shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.5);
}

body {
  background-color: #f5f7fa;
  color: var(--text);
  transition: var(--transition);
}

.dark-mode body {
  background-color: #0a0a0a;
}

#app {
  display: flex;
  min-height: 100vh;
  transition: var(--transition);
}

/* 侧边栏样式 */
.sidebar {
  width: var(--sidebar-width);
  background: linear-gradient(180deg, var(--primary), var(--secondary));
  color: white;
  height: 100vh;
  position: fixed;
  left: 0;
  top: 0;
  overflow-y: auto;
  transition: var(--transition);
  z-index: 1000;
  box-shadow: var(--shadow);
}

.sidebar.collapsed {
  width: var(--sidebar-collapsed-width);
}

.sidebar.hidden {
  transform: translateX(-100%);
  width: 0;
}

.sidebar-header {
  padding: 15px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  height: var(--header-height);
  position: relative;
}

.logo {
  display: flex;
  align-items: center;
  gap: 12px;
  overflow: hidden;
  flex: 1;
}

.logo-icon {
  font-size: 28px;
  color: #ffd43b;
  flex-shrink: 0;
}

.logo-text {
  font-size: 22px;
  font-weight: 700;
  white-space: nowrap;
  transition: var(--transition);
}

.sidebar.collapsed .logo-text {
  opacity: 0;
  width: 0;
}

.sidebar-controls {
  display: flex;
  gap: 8px;
}

.toggle-btn, .hide-btn {
  background: rgba(255, 255, 255, 0.1);
  border: none;
  color: white;
  cursor: pointer;
  font-size: 16px;
  transition: var(--transition);
  width: 32px;
  height: 32px;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.toggle-btn:hover, .hide-btn:hover {
  background: rgba(255, 255, 255, 0.2);
  transform: scale(1.1);
}

.sidebar-menu {
  padding: 15px 0;
}

.menu-section {
  margin-bottom: 10px;
}

.menu-title {
  padding: 10px 15px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.5px;
  opacity: 0.9;
  white-space: nowrap;
  transition: var(--transition);
  cursor: pointer;
}

.menu-title:hover {
  background: rgba(255, 255, 255, 0.1);
}

.menu-title i {
  transition: var(--transition);
  font-size: 12px;
  opacity: 0.7;
}

.menu-items {
  overflow: hidden;
  transition: var(--transition);
}

.menu-item {
  display: flex;
  align-items: center;
  padding: 10px 15px 10px 35px;
  color: rgba(255, 255, 255, 0.8);
  text-decoration: none;
  transition: var(--transition);
  white-space: nowrap;
}

.menu-item:hover {
  background: rgba(255, 255, 255, 0.1);
  color: white;
}

.menu-item.active {
  background: rgba(255, 255, 255, 0.2);
  color: white;
  border-left: 4px solid white;
}

.menu-item i {
  margin-right: 12px;
  font-size: 16px;
  width: 24px;
  text-align: center;
  flex-shrink: 0;
}

.sidebar.collapsed .menu-title span,
.sidebar.collapsed .menu-item span {
  opacity: 0;
  width: 0;
  display: none;
}

.sidebar.collapsed .menu-title {
  justify-content: center;
  padding: 15px 0;
}

.sidebar.collapsed .menu-title i {
  display: none;
}

.sidebar.collapsed .menu-item {
  justify-content: center;
  padding: 12px 0;
}

.sidebar.collapsed .menu-item i {
  margin-right: 0;
  font-size: 18px;
}

/* 修改主内容区域样式 */
.main-content {
  /* 移除默认的margin-left，通过侧边栏状态动态控制 */
  margin-left: 0;
  width: 100%;
}

/* 仅在侧边栏未隐藏且未折叠时添加margin-left */
.sidebar:not(.hidden):not(.collapsed) ~ .main-content {
  margin-left: var(--sidebar-width);
}

/* 侧边栏折叠时的margin调整 */
.sidebar.collapsed:not(.hidden) ~ .main-content {
  margin-left: var(--sidebar-collapsed-width);
}

/* 内容区域样式调整 */
.content {
  /* 移除默认内边距或根据需要调整 */
  padding: 15px;
  /* 确保内容区域占满可用空间 */
  min-height: calc(100vh - var(--header-height));
  width: 100%;
  /* 使用box-sizing确保宽度计算正确 */
  box-sizing: border-box;
}

/* 确保所有父元素都占满宽度 */
#app, .main-content {
  width: 100%;
}

/* 移除可能限制宽度的max-width设置 */
.full-width-section {
  max-width: none;
}

/* 主内容区域 */
.main-content {
  flex: 1;
  min-width: 0;
  margin-left: var(--sidebar-width);
  transition: var(--transition);
  display: flex;
  flex-direction: column;
}

.sidebar.collapsed ~ .main-content {
  margin-left: var(--sidebar-collapsed-width);
}

.sidebar.hidden ~ .main-content {
  margin-left: 0;
}

/* 顶部导航 */
.topbar {
  height: var(--header-height);
  background-color: white;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  position: sticky;
  top: 0;
  z-index: 900;
  transition: var(--transition);
  width: 100%;
}

.dark-mode .topbar {
  background-color: #1e1e1e;
  border-bottom: 1px solid var(--border);
}

.topbar-container {
  display: flex;
  height: 100%;
}

.full-width-section {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 0 20px;
}

.left-section {
  display: flex;
  align-items: center;
  gap: 15px;
  flex: 1;
  min-width: 0;
}

.topbar-right {
  display: flex;
  align-items: center;
  gap: 20px;
}

.sidebar-toggle, .show-sidebar-btn {
  background: transparent;
  border: none;
  color: var(--text);
  cursor: pointer;
  font-size: 18px;
  display: flex;
  align-items: center;
  padding: 8px 12px;
  border-radius: 4px;
  transition: var(--transition);
}

.sidebar-toggle:hover, .show-sidebar-btn:hover {
  background: rgba(0, 0, 0, 0.05);
}

.dark-mode .sidebar-toggle:hover, 
.dark-mode .show-sidebar-btn:hover {
  background: rgba(255, 255, 255, 0.1);
}

.show-sidebar-btn span {
  margin-left: 8px;
  font-size: 14px;
  white-space: nowrap;
}

.breadcrumb {
  display: flex;
  align-items: center;
  gap: 10px;
  overflow: hidden;
  margin-left: 15px;
}

.breadcrumb a {
  text-decoration: none;
  color: var(--text-light);
  font-size: 14px;
  white-space: nowrap;
}

.breadcrumb a:last-child {
  color: var(--primary);
  font-weight: 500;
}

.breadcrumb i {
  font-size: 12px;
  color: var(--text-light);
}

.theme-toggle {
  background: transparent;
  border: none;
  color: var(--text);
  cursor: pointer;
  font-size: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  transition: var(--transition);
}

.theme-toggle:hover {
  background: rgba(0, 0, 0, 0.05);
}

.dark-mode .theme-toggle:hover {
  background: rgba(255, 255, 255, 0.1);
}

.notifications {
  position: relative;
}

.notification-btn {
  background: transparent;
  border: none;
  color: var(--text);
  cursor: pointer;
  font-size: 18px;
  position: relative;
}

.notification-badge {
  position: absolute;
  top: -5px;
  right: -5px;
  background-color: var(--danger);
  color: white;
  font-size: 10px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.user-menu {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  position: relative;
}

.user-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: linear-gradient(45deg, var(--primary), var(--success));
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-weight: bold;
  flex-shrink: 0;
}

.user-info {
  display: flex;
  flex-direction: column;
}

.user-name {
  font-weight: 600;
  font-size: 14px;
  white-space: nowrap;
}

.user-role {
  font-size: 12px;
  color: var(--text-light);
  white-space: nowrap;
}

/* 主内容区域 */
.content {
  padding: 25px;
  min-height: calc(100vh - var(--header-height));
  flex: 1;
}


/* 响应式设计 */
@media (max-width: 992px) {
  .sidebar {
    transform: translateX(-100%);
    width: var(--sidebar-width);
  }
  
  .sidebar.active {
    transform: translateX(0);
  }
  
  .sidebar ~ .main-content {
    margin-left: 0;
  }
  
  .sidebar.hidden {
    transform: translateX(-100%);
  }
  
  .show-sidebar-btn span {
    display: none;
  }
  
  .user-info {
    display: none;
  }
}

@media (max-width: 768px) {
  .breadcrumb {
    display: none;
  }
  
  .show-sidebar-btn {
    display: none;
  }
  
  .user-info {
    display: none;
  }
  
  .topbar-right {
    gap: 15px;
  }
  
  .full-width-section {
    padding: 0 10px;
  }
}

@media (max-width: 576px) {
  .full-width-section {
    padding: 0 8px;
  }
  
  .sidebar-toggle {
    padding: 6px;
  }
  
  .topbar-right {
    gap: 10px;
  }
  
  .notifications {
    display: none;
  }
}
</style>